<template>
 <div class="label-box">
     <div class="tag" v-for="(item,index) in labelarr" :key="index">
        <span>{{item}}</span>
        <i class="icon" @click="tagDel(index)">x</i>
     </div>
     <div class="add-tag" @click="addtag" v-if="!isShow">添加新标签</div>
     <input class="add-input" v-model="inputVal" @keyup.enter="addinput" ref="inputFocus" @blur="addinput" v-else>
 </div>
</template>

<script>
 export default {
   name:'LabelBox',
   data(){
       return{
           isShow:false,
           inputVal:'',
           labelarr:[]
       }
   },
   methods:{
       addtag(){
            this.isShow = true;
            this.$nextTick(()=>{
                this.$refs.inputFocus.focus()
            })
       },
       addinput(){
           this.isShow = false;
           if(this.inputVal != ''){
               this.labelarr.push(this.inputVal)
               this.inputVal = ''
           }
       },
       tagDel(index){
           this.labelarr.splice(index,1)
       }
       
   }
 }
</script>

 
<style scoped>
 .label-box{
    margin:20px 30px;
    position: relative;
 }
 .add-tag{
    display: inline-block;
    color: #fff;
    background:#1890ff;
    border-radius: 5px;
    cursor: pointer;
    padding:5px 10px;
    font-size:14px;
    margin-right: 10px;
 }
 .tag{
    display: inline-block;
    color: #fff;
    background:#1890ff;
    border-radius: 5px;
    cursor:auto;
    padding:5px 25px 5px 10px;
    font-size:14px;
    margin-right: 10px;
    margin-bottom: 10px;
 }
 .add-input{
     width: 90px;
     height: 26px;
     outline: none;
     border-radius: 5px;
     border: 1px solid rgb(64,158,255);
     padding:2px 5px;
 }
 .icon{
    position: absolute;
    margin-bottom:2px;
    margin-left:8px;
    color: #fff;
    cursor: pointer;
 }
 .icon:hover{
     color:red;
 }
 .labelarr{
     display: flex;
 }
</style>

